<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$watch</title>
</head>
<body>

<div id="app">{{fullName}}</div>


<script src="vue/vue.js"></script>
<script>
    //使用计算属性
    // var vm=new Vue({
    //     el:"#app",
    //     data:{
    //         firstName:"LIU",
    //         lastName:"lee",
    //     },
    //     computed:{
    //         fullName:function () {
    //             return this.firstName +" "+ this.lastName
    //         }
    //     }
    // });
    // 使用$watch
    var vm=new Vue({
        el:"#app",
        data:{
            firstName:"LIU",
            lastName:"lee",
            fullName:""
        },
    });
    vm.$watch('firstName',function (val) {
        this.fullName=val+""+this.lastName;
    });

    vm.$watch('lastName',function (val) {
        this.fullName=this.firstName+""+val;
    });


</script>


</body>
</html>